// Color
$bcg-darkest: #20292b;
$bcg-darker: #293538;
$bcg-dark: #2c393c;
$bcg-primary: #364346;
$text-darkest: #5b7073;
$text-dark: #9ba1a3;
$text-secondary: #b1b8ba;
$text-primary: #ffffff;
$text-active: #f60;
$error: #fb222f;
$field-padding: 3px;
$border-primary: #232e30;
$disabled-opacity: 0.4;

// Breakpoints
$break-small: 320px;
$break-medium: 1024px;

body {
  background-color: #fff;
  color: #cccfcf;
  font-family: "Proxima Nova", Helvetica, arial, sans-serif;
  font-size: 16px;
  margin: 0;
  overscroll-behavior: none;
}

/* Sidebar menu */
.sidenav {
  height: 100%;
  width: 240px;
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  background: $bcg-primary;
  transition: all 240ms ease-in-out;
  @media screen and (max-width: $break-medium) {
    background: rgba(54, 67, 70, 0.98);
    width: 100%;
    &.closed {
      left: -100%;
    }
  }
}

.sidenav-toggle {
  position: absolute;
  right: 12px;
  top: 12px;
  height: 32px;
  width: 32px;
  padding: 12px;
  color: white;
  z-index: 100;
  display: none;
  background: $bcg-darkest;
  border-radius: 300px;
  cursor: pointer;
  &:hover {
    background: black;
  }
  @media screen and (max-width: $break-medium) {
    display: block;
  }
}

/* Navigation menu links */
.sidenav a,
p {
  text-decoration: none;
  display: block;
}

.sidenav a {
  padding: 6px 8px 6px 32px;
  font-size: 1rem;
  color: $text-secondary;
  cursor: pointer;
  &:hover {
    color: $text-primary;
  }
  &.active {
    color: $text-active;
  }
  @media screen and (max-width: $break-medium) {
    font-size: 1.2rem;
    padding: 6px 8px 12px 32px;
  }
}

.sidenav p {
  padding: 24px 8px 8px 24px;
  margin: 0;
  font-size: 1.4rem;
  font-weight: bold;
  color: $text-primary;
}

#example,
iframe {
  position: fixed;
  border: 0px;
  left: 0;
  right: 0;
  padding-left: 240px;
  width: calc(100% - 240px);
  height: 100%;
  overflow: auto;
  @media screen and (max-width: $break-medium) {
    padding-left: 0;
    width: 100%;
  }
}
